<!--
 * @Description: 工单列表
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:12:18
-->
<template>
  <div>
    <div class="search">
        <el-input v-model="input" placeholder="请输入内容" style="width: 500px;"></el-input>
        <el-button type="primary" @click="onSearch">搜索</el-button>
    </div>
    <div class="table">
      <el-table :data="empData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="230">
        </el-table-column>
        <el-table-column prop="engineer_name" label="工程名称" width="230">
        </el-table-column>
        <el-table-column prop="device_name" label="设备名称" width="230">
        </el-table-column>
        <el-table-column prop="bill_why" label="问题描述" width="230">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
        </el-table-column>
        <el-table-column prop="type" label="工单类型" align="center" width="150">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
          <el-button type="text" @click="toEdit(scope.row)" >详情</el-button>
          <el-button type="text" @click="toDelete(scope.row.id)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" style="margin-top:15px;text-align:left">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page"
        :page-sizes="[2, 5, 10, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        hide-on-single-page
        >
      </el-pagination>
    </div>
  </div>

</template>

<script>
import {get} from '@/utils/request'
import { CLIENT_RENEG_LIMIT } from 'tls';
export default {
  data() {
    return {
      input:'',
      // 表单对象
      form: {},
      // 设备数据
      empData:[],
      params:{
        page:1,
        pageSize:6
      },
      total: 0
    };
  },
  computed: {},
  methods: {
    // 查询设备
    async getEmpData(){
      // form  name bind_status online_status 
      // params page pageSize
      //搜索和分页查询同时处理
      
      let res = await get('/workorder/pageQuery',this.params);
      
      console.log(res);
      this.empData = res.data.list;
      this.total = res.data.total;
    },
    toEdit(id) {
      this.$router.push({
        path:"/am/order/Details",
        query:id
      })
     console.log(id,'fdfdfddfd');     
    },
    
    toDelete(id) {
      this.$confirm('此操作将取消该保修, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 发送删除请求
        let res = await del('/workorder/cancelOrder',{id:id});
        console.log(res,'bbbb');
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.params.page = 1;
        // 刷新页面 重新请求数据
        this.getEmpData();
      }).catch(() => {
        console.log('bbbb');
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 去搜索
    onSearch() {
      // 页码从1开始搜索
      this.params.page = 1;
      this.getEmpData();
    },
    handleSizeChange(pageSize ) {
      // console.log(pageSize,'条数');
      // 当条数发生改变 重新请求工程数据
      // params.pageSize --->2 
      this.params.pageSize = pageSize;
      // 重新请求工程数据
      this.getEmpData();
    },
    // 页码发生改变函数
    handleCurrentChange(page) {
      // console.log(page,'当前页码');
      this.params.page = page;
      this.getEmpData();
    }
  },
  created() { 
    this.getEmpData();
  },
  mounted() { },
};
</script>
<style scoped></style>
